<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/oApublic.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1435664_1dajpqx0ypm.css">

    <link rel="stylesheet" href="./css/xlPaging.css">
    <style>
        form {
            width: 98.054105%;
            height: 127px;
            padding-top: 10px;
            background-color: #fff;
            margin: 10px auto 0;
            font-size: 0;
        }

        form .inp {
            width: 20.977693%;
            margin-left: 1.186521%;
            margin-right: 1.233981%;
            margin-bottom: 24px;
        }

        form .inp:nth-of-type(2) {
            width: 16.8486%;
            margin-right: 7.641196%;
        }

        form .inp:nth-of-type(5) {
            width: 14.048410%;
            margin-right: 5.742762%;
        }

        form .inp:nth-of-type(6) {
            width: 10.266159%;
            margin-right: 0;
        }

        form .inp:nth-of-type(7) {
            width: 11.248220%;
            margin-left: 0;
        }


        form label {
            margin-left: 2.186312%;
            font-size: 13px;
        }

        form input[type='text'] {
            width: 100%;
        }

        form i {
            height: 38px;
            margin-left: 10px;
            line-height: 38px;
        }

        #leaveTime {
            width: 80%;
        }

        #activity,
        #province,
        #city {
            cursor: pointer;
        }

        form .search {
            width: 8.542952%;
            height: 38px;
            border-radius: 5px;
            background-color: #429788;
            float: right;
            margin-right: 1%;
            line-height: 38px;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }

        form .search i {
            font-size: 15px;
        }

        .content {
            width: 98.054105%;
            margin: 10px auto 0;
            position: relative;
            padding-bottom: 55px;
        }

        #page {
            left: 0;
        }

        .content .iframeHead {
            height: 60px;
            ;
            font-weight: 600;
            position: relative;
        }

        .content .iframeHead span {
            margin-left: 1%;
            line-height: 60px;
        }

        .content .iframeHead div {
            width: 8.542952%;
            height: 38px;
            border-radius: 5px;
            background-color: #429788;
            /* position: absolute;
            top: 10px;
            right: 1%; */
            float: right;
            margin-top: 10px;
            margin-right: 1%;
            line-height: 38px;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }

        .content .iframeHead div i {
            font-size: 15px;
        }

        .content .list {
            margin-top: 1px;
            background-color: #fff;
        }

        .content .list .list-item {
            width: 97.97%;
            margin: 0 auto;
            padding-top: 3px;
            padding-bottom: 9px;
            border-bottom: 2px solid #d3d3d3;
        }

        .list-item:hover {
            background-color: #ccc;
        }

        .content .list h3 {
            font-size: 16px;
            height: 44px;
            line-height: 44px;
        }

        .content .list h3 p {
            float: right;
            color: #666;
        }

        .content .list h3 p span {
            width: 107px;
            display: inline-block;
            color: #000;
        }

        .content .list .list-item ul {
            display: flex;
            justify-content: space-around;
            width: 100%;
            font-size: 10px;
            line-height: 27px;
        }

        .content .list .list-item ul li {
            height: 50px;
        }

        .content .list .list-item ul li div:nth-of-type(1) {
            color: #666;
        }

        form span {
            height: 38px;
            line-height: 38px;
            float: right;
            margin-right: 5px;
        }

        #activityDiv,
        #provinceDiv,
        #cityDiv {
            position: relative;
        }

        #activity,
        #city,
        #province {
            width: 100%;
        }

        #cityDiv span,
        #provinceDiv span,
        #activityDiv span {
            position: absolute;
            top: 0;
            right: 0;
        }

        /* 提醒功能 */
        #promessage {
            position: fixed;
            bottom: 5%;
            right: 5%;
            width: 450px;
            height: 50px;
            background: rgba(0, 0, 0, 0.2);
            color: rgb(247, 240, 240);
            border-radius: 6px;
        }

        #promessage h2 {
            line-height: 40px;
            font-size: 15px;
            width: 95%;
            margin: auto;
            border-bottom: 2px solid #fff;
            margin-bottom: 10px;
            overflow: hidden;
        }

        #promessage h2 span:first-child {
            float: left;
            margin-left: 5px;
        }

        #promessage h2 span:last-child {
            float: right;
            margin-right: 15px;
            font-weight: bold;
        }

        #promessage ul li {
            width: 95%;
            margin-left: 6%;
            list-style: outside;
            line-height: 26px;
            font-size: 14px;
        }

        #promessage ul li:hover {
            background: none;
            color: #fff;
        }

        #promessage ul li span:nth-child(1) {
            margin-right: 50px;
        }

        #promessage ul li span:nth-child(3) {
            float: right;
            margin-right: 50px;
        }

        .listMsg {
            width: 100%;
            height: 200px;
            overflow: hidden;
            display: none;
        }

        #fileForm {
            height: 100%;
            padding: 0;
        }

        .import {
            position: relative;
            cursor: pointer;
        }

        .import #file {
            position: absolute;
            right: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
            width: 100%;
            height: 100%;
        }

        i {
            cursor: pointer;
        }

        .import #submit {
            position: absolute;
            top: 4px;
            width: 50px;
            height: 30px;
            left: -55px;
            border: none;
            border-radius: 5px;
            background-color: #429788;
            line-height: 30px;
            color: #fff;
            text-align: center;
            display: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="iframeHead clear"><span>院校管理</span><em>/ 院校列表</em></div>
    <form action="javascript:void(0)">
        <label for="inpSchoolName">院校名称</label>
        <div class="inp"><input type="text" name="inpSchoolName" id="inpSchoolName" placeholder="请输入院校名称"></div>
        <label for="leaveTime">离校时间</label>
        <div class="inp"><i class="icon iconfont icon-rili"></i><input type="text" name="leaveTime" id="leaveTime"
                placeholder="离校时间"></div>
        <label for="liaison">院校联系人</label>
        <div class="inp"><input type="text" name="liaison" id="liaison" placeholder="院校联系人"></div>
        <br />
        <label for="channelStaff">渠道人员</label>
        <div class="inp"><input type="text" name="channelStaff" id="channelStaff" placeholder="渠道人员姓名"></div>
        <label for="activity">活动方式</label>
        <div class="inp" id="activityDiv">
            <select name="activity" id="activity">
                <option value="" disabled selected hidden>活动方式</option>
                <option value="实训">实训</option>
                <option value="讲座">讲座</option>
                <option value="宣讲">宣讲</option>
            </select>
            <span class="icon iconfont icon-xia"></span>
        </div>
        <label>地区</label>
        <div class="inp" id="provinceDiv">
            <select name="province" id="province">
                <option disabled selected hidden></option>
            </select>
            <span class="icon iconfont icon-xia"></span>
        </div>
        <div class="inp" id="cityDiv">
            <select name="city" id="city">
            </select>
            <span class="icon iconfont icon-xia"></span>
        </div>
        <div class="search">
            <i class="icon iconfont icon-sousuo">搜索</i>
        </div>
    </form>
    <div class="content">
        <div class="iframeHead clear">
            <span>院校列表</span>
            <div class="add">
                <i class="icon iconfont icon-jiahao">添加</i>
            </div>
            <div class="drive">
                <i class="icon iconfont icon-daochu">导出</i>
            </div>
            <form id="fileForm" method="post" enctype="multipart/form-data">
                <div class="import">
                    <i class="icon iconfont icon-daoru">导入</i>
                    <input type="file" name="file" id="file">
                    <input type="submit" id="submit">
                </div>
            </form>
        </div>
        <div class="list">
            <div class="list-item">
                <h3>清华大学<p>渠道人员：<span>百里奚</span></p>
                </h3>
                <ul>
                    <li>
                        <div>实际报名人数：</div>
                        <div>600</div>
                    </li>
                    <li>
                        <div>预计报名人数：</div>
                        <div>1000</div>
                    </li>
                    <li>
                        <div>目标学员数量：</div>
                        <div>1000</div>
                    </li>
                    <li>
                        <div>以往培训总人数：</div>
                        <div>900</div>
                    </li>
                    <li>
                        <div>公司以往招生量：</div>
                        <div>899</div>
                    </li>
                    <li>
                        <div>活动日期：</div>
                        <div>2019-11-12</div>
                    </li>
                    <li>
                        <div>活动方式：</div>
                        <div>实训</div>
                    </li>
                    <li>
                        <div>离校时间：</div>
                        <div>2019-12-31</div>
                    </li>
                    <li>
                        <div>院校联系人：</div>
                        <div>张三</div>
                    </li>
                    <li>
                        <div>联系人电话：</div>
                        <div>1212121212</div>
                    </li>
                </ul>
            </div>
            <div class="list-item">
                <h3>清华大学<p>渠道人员：<span>百里奚</span></p>
                </h3>
                <ul>
                    <li>
                        <div>实际报名人数：</div>
                        <div>600</div>
                    </li>
                    <li>
                        <div>预计报名人数：</div>
                        <div>1000</div>
                    </li>
                    <li>
                        <div>目标学员数量：</div>
                        <div>1000</div>
                    </li>
                    <li>
                        <div>以往培训总人数：</div>
                        <div>900</div>
                    </li>
                    <li>
                        <div>公司以往招生量：</div>
                        <div>899</div>
                    </li>
                    <li>
                        <div>活动日期：</div>
                        <div>2019-11-12</div>
                    </li>
                    <li>
                        <div>活动方式</div>
                        <div>实训</div>
                    </li>
                    <li>
                        <div>离校时间</div>
                        <div>2019-12-31</div>
                    </li>
                    <li>
                        <div>院校联系人</div>
                        <div>张三</div>
                    </li>
                    <li>
                        <div>联系人电话：</div>
                        <div>1212121212</div>
                    </li>
                </ul>
            </div>
        </div>
        <div id="page"></div>
    </div>
    <div id="promessage">
        <h2>
            <span class="leftMsg">提醒信息</span>
            <span class="rightMsg"><i class="icon iconfont icon-zhankai"></i></span>
        </h2>
        <div class="listMsg">
            <ul>
            </ul>
        </div>
    </div>
</body>
<script src="./js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.form.js"></script>
<script src="laydate/laydate.js"></script>
<script src="./js/schoolJson.js"></script>
<script src="./js/xlPaging.js"></script>
<script src="./js/oApublic.js"></script>
<script src="js/schoolTime.js"></script>

<script>
    var allPage = localStorage.allPage || 30;
    // var listNum;
    // var nowset = localStorage.schoolPageNum;
    window.onload = function () {
        $("#page").paging({
            nowPage: 1, // 当前页码
            pageNum: allPage, // 总页码
            buttonNum: 9, //要展示的页码数量
            canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
            showOne: 1,//只有一页时，是否显示。0=不显示,1=显示（默认）
            callback: function (num) { //回调函数
                localStorage.schoolPageNum = num;
            }
        });
        indexAjax(1);
    }

    $("#page").on("click", "ul li", function () {
        pageNum = localStorage.schoolPageNum;
        indexAjax(pageNum);
    })
    $('.add').on('click', function () {
        window.location = './addschool.html';
    })
    $('input').attr('autocomplete', 'off');
    //执行一个laydate实例
    laydate.render({
        elem: '#leaveTime'
        //指定元素
    });
    rotateXia('#activity');
    rotateXia('#city');
    rotateXia('#province');
    //二级联动
    $(function () {
        $.ajax({
            url: schoolUrl,
            type: "get",
            dataType: "json",
            data: {
                "method": "province",
            },
            success: function (data) {
                if (data.code == 100) {
                    console.log(data);
                    var list = data.result;
                    for (var i = 0; i < list.length; i++) {
                        var oPtion = $('<option></option>');
                        $(oPtion).html(list[i].name);
                        $(oPtion).val(list[i].id);
                        $(oPtion).appendTo($('#province'));
                    }
                }
            },
            error: function (xhr, ero) {
                console.log(ero);
            }
        });
    });
    $("#province").change(function () {
        $('#city').html('');
        var oProvince = $('#province').find("option:selected").val();
        $.ajax({
            url: schoolUrl,
            type: "get",
            dataType: "json",
            data: {
                "method": "cityandarea",
                "parent_id": oProvince,
            },
            success: function (data) {
                if (data.code == 100) {
                    console.log(data);
                    var list = data.result;
                    for (var i = 0; i < list.length; i++) {
                        var oPtion = $('<option></option>');
                        $(oPtion).html(list[i].name);
                        $(oPtion).val(list[i].id);
                        $(oPtion).appendTo($('#city'));
                    }
                }
            },
            error: function (xhr, ero) {
                console.log(ero);
            }
        });
    });

    //查找展示数据
    $('.search').on('click', function () {
        $(".list").html("");
        $.ajax({
            type: "get",
            url: schoolUrl,
            dataType: "json",
            data: {
                "method": "allschool",
                "schoolName": $('#inpSchoolName').val(),
                "leaveTime": $('#leaveTime').val(),
                "departConnection": $('#liaison').val(),
                "empName": $('#channelStaff').val(),
                "beforeActivity": $('#activity').val(),
                "regionId": $('#city').find("option:selected").val(),
                "currentPage": '1',
                "rows": 10,
            },
            success: function (data) {
                viewList(data)
            },
            error: function (xhr, ero) {
                console.log(ero);
            }
        })
    })

    //展示数据
    var outExc;
    function indexAjax(page) {
        $(".list").html("");
        $.ajax({
            type: "get",
            url: schoolUrl,
            dataType: "json",
            data: {
                "method": "allschool",
                "currentPage": page,
                "rows": 10,
            },
            success: function (data) {
                localStorage.allPage = data.result.totalPage;
                outExc = data.result.list;
                viewList(data)
            },
            error: function (xhr, ero) {
                console.log(ero);
            }
        })
    }
    function viewList(data) {
        var datalist = data.result.list;
        for (var i = 0; i < datalist.length; i++) {
            var oListItem = $("<div>");
            $(oListItem).attr("listId", datalist[i].id);
            // console.log($(oListItem).prop("listId"));
            $(oListItem).prop("class", "list-item");
            $(oListItem).appendTo($(".list"));
            var oH3 = $("<h3>");
            $(oH3).html(datalist[i].schoolName);
            $(oH3).appendTo(oListItem);
            var oP = $("<p>");
            $(oP).html("渠道人员：");
            $(oP).appendTo($(oH3));
            var oSpan = $("<span>");
            $(oSpan).html(datalist[i].empName);
            $(oSpan).appendTo($(oP));
            var oUl = $("<ul>");
            $(oUl).prop("class", "clear");
            $(oUl).appendTo($(oListItem));
            var oLi1 = $("<li>");
            $(oLi1).appendTo(oUl);
            var oLi1Div1 = $("<div>");
            $(oLi1Div1).html("实际报名人数：");
            $(oLi1Div1).appendTo(oLi1);
            var oLi1Div2 = $("<div>");
            $(oLi1Div2).html(datalist[i].realityNum);
            // console.log(datalist[i].realityNum);
            $(oLi1Div2).appendTo(oLi1);
            var oLi2 = $("<li>");
            $(oLi2).appendTo(oUl);
            var oLi2Div1 = $("<div>");
            $(oLi2Div1).html("预计报名人数：");
            $(oLi2Div1).appendTo(oLi2);
            var oLi2Div2 = $("<div>");
            $(oLi2Div2).html(datalist[i].planRecruitNum);
            $(oLi2Div2).appendTo(oLi2);
            var oLi3 = $("<li>");
            $(oLi3).appendTo(oUl);
            var oLi3Div1 = $("<div>");
            $(oLi3Div1).html("目标学员数量：");
            $(oLi3Div1).appendTo(oLi3);
            var oLi3Div2 = $("<div>");
            $(oLi3Div2).html(datalist[i].targetStudentSum);
            $(oLi3Div2).appendTo(oLi3);
            var oLi4 = $("<li>");
            $(oLi4).appendTo(oUl);
            var oLi4Div1 = $("<div>");
            $(oLi4Div1).html("以往培训总人数：");
            $(oLi4Div1).appendTo(oLi4);
            var oLi4Div2 = $("<div>");
            $(oLi4Div2).html(datalist[i].beforeStudySum);
            $(oLi4Div2).appendTo(oLi4);
            var oLi5 = $("<li>");
            $(oLi5).appendTo(oUl);
            var oLi5Div1 = $("<div>");
            $(oLi5Div1).html("公司以往招生量：");
            $(oLi5Div1).appendTo(oLi5);
            var oLi5Div2 = $("<div>");
            $(oLi5Div2).html(datalist[i].beforeRecruitNum);
            $(oLi5Div2).appendTo(oLi5);
            var oLi6 = $("<li>");
            $(oLi6).appendTo(oUl);
            var oLi6Div1 = $("<div>");
            $(oLi6Div1).html("活动日期：");
            $(oLi6Div1).appendTo(oLi6);
            var oLi6Div2 = $("<div>");
            $(oLi6Div2).html(datalist[i].activityTime);
            $(oLi6Div2).appendTo(oLi6);
            var oLi7 = $("<li>");
            $(oLi7).appendTo(oUl);
            var oLi7Div1 = $("<div>");
            $(oLi7Div1).html("活动方式：");
            $(oLi7Div1).appendTo(oLi7);
            var oLi7Div2 = $("<div>");
            $(oLi7Div2).html(datalist[i].planActivity);
            $(oLi7Div2).appendTo(oLi7);
            var oLi8 = $("<li>");
            $(oLi8).appendTo(oUl);
            var oLi8Div1 = $("<div>");
            $(oLi8Div1).html("离校时间：");
            $(oLi8Div1).appendTo(oLi8);
            var oLi8Div2 = $("<div>");
            $(oLi8Div2).html(timestampToTime(datalist[i].leaveTime));
            $(oLi8Div2).appendTo(oLi8);
            var depart = JSON.parse(datalist[i].departConnection);
            var name = depart.name;
            var tel = depart.tel;
            var oLi9 = $("<li>");
            $(oLi9).appendTo(oUl);
            var oLi9Div1 = $("<div>");
            $(oLi9Div1).html("院校联系人：");
            $(oLi9Div1).appendTo(oLi9);
            var oLi9Div2 = $("<div>");
            $(oLi9Div2).html(name);
            $(oLi9Div2).appendTo(oLi9);
            var oLi10 = $("<li>");
            $(oLi10).appendTo(oUl);
            var oLi10Div1 = $("<div>");
            $(oLi10Div1).html("联系人电话：");
            $(oLi10Div1).appendTo(oLi10);
            var oLi10Div2 = $("<div>");
            $(oLi10Div2).html(tel);
            $(oLi10Div2).appendTo(oLi10);
        }
    }
    //导入
    $(function () {
        $('.import').on('click', function () {
            $('#submit').css("display", "block")
            $('.import').on('click', "#submit", function () {
                $('#fileForm').on('submit', function () {
                    $(this).ajaxSubmit({
                        url: schoolUrl,
                        type: "post",
                        dataType: "text",
                        enctype: "multipart/form-data",
                        success: function (data) {
                            viewList(data);
                            window.location = "school.html";
                        }
                    });
                    $(this).resetForm(); // 提交后重置表单
                    return false; // 阻止表单自动提交事件
                });
            });
        })
    })
    //查看数据
    $('.list').on('click', ".list-item", function () {
        localStorage.listId = $(this).attr("listId");
        console.log(localStorage.listId);
        window.location = './schoolDetail.html';
    })
    // $('#activity').on('click',function(){
    // })
    $(".drive").on("click", function () {
        console.log(outExc)
        //要导出的json数据
        var jsonData = outExc;
        //列标题，逗号隔开，每一个逗号就是隔开一个单元格
        var str = `姓名,电话,邮箱\n`;
        //增加\t为了不让表格显示科学计数法或者其他格式
        for (var i = 0; i < jsonData.length; i++) {
            for (var item in jsonData[i]) {
                str += `${jsonData[i][item] + '\t'},`;
            }
            str += '\n';
        }
        //encodeURIComponent解决中文乱码
        var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
        //通过创建a标签实现
        var link = document.createElement("a");
        link.href = uri;
        //对下载的文件命名
        link.download = "json数据表.csv";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    })
    //提醒功能
    var onOff = true;
    var ulTop;
    var iTimer;
    $('.rightMsg').click(function () {
        if (onOff) {
            // 提醒信息接口
            $.ajax({
                url: schoolUrl,
                type: 'get',
                data: {
                    "method": "remindschool",
                    "empId": "10001",
                },
                dataType: 'json',
                success: function (data) {
                    $(".listMsg ul").empty();
                    console.log(data);
                    for (var i = 0; i < data.result.length; i++) {
                        if (data.result[i].remindTypeId == "1") {
                            $(".listMsg ul").append('<li><span>待跟进量提醒</span><span>' + data.result[i].remindContent + '</span><span>' + timestampToTime(data.result[i].remindTime) + '</span></li>');
                        } else if (data.result[i].remindTypeId == "2") {
                            $(".listMsg ul").append('<li><span>转公共量提醒</span><span>' + data.result[i].remindContent + '</span><span>' + timestampToTime(data.result[i].remindTime) + '</span></li>');
                        } else if (data.result[i].remindTypeId == "3") {
                            $(".listMsg ul").append('<li><span>接受量提醒</span><span>' + data.result[i].remindContent + '</span><span>' + timestampToTime(data.result[i].remindTime) + '</span></li>');
                        }
                    }
                    $(".listMsg ul li span:eq(0)").css("width", '100px');
                },
                error: function (xhr, error) {
                    console.error(error);
                }

            });
            // 改变小图标
            $('.rightMsg i').toggleClass('icon iconfont icon-zhankai');
            $('.rightMsg i').toggleClass('icon iconfont icon-shouqi');
            $('#promessage').animate({
                height: 250

            }, 400, function () {
                $('.listMsg').css('display', 'block');
                // 添加定时器
                iTimer = setInterval(function () {

                    if (($('.listMsg').scrollTop() + $('.listMsg').height()) >= $('.listMsg ul').height()) {
                        // 滚动到底部时回到顶部继续滚动
                        ulTop = 0;
                        $('.listMsg').scrollTop(ulTop + 1);
                    } else {
                        ulTop = $('.listMsg').scrollTop();
                        $('.listMsg').scrollTop(ulTop + 1);
                    }

                }, 100);
            });
            onOff = false;
        } else {
            $('.rightMsg i').toggleClass('icon iconfont icon-zhankai');
            $('.rightMsg i').toggleClass('icon iconfont icon-shouqi');
            clearInterval(iTimer)
            $('.rightMsg em').addClass('fa fa-wheelchair');
            $('#promessage').animate({
                height: 50
            }, 400, function () {
                $('.listMsg').css('display', 'none');
            });
            onOff = true;
        }
    });

</script>

</html>